<script setup>
import {reactive, ref} from "vue";

let message = ref("Hello, World!")

// 变量存储是外部样式类名称
// const colorActive = ref("active")
// const lineActive = ref("line")

// 将样式类名称保存到数组中——可以一次使用多个样式
const total = reactive(["active", "line"])

</script>

<template>
  <h2 :class="total">{{ message }}</h2>
  <!--  <h2 :class="lineActive">{{ message }}</h2>-->
</template>

<style scoped>
.active {
  color: red;
}

.line {
  text-decoration: underline
}
</style>